<template>
    <div class="detail-container">
        <span>
            <b>{{ isEdit ? '绩效详情' : '新增绩效' }}</b>
        </span>
        <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item v-for="(detailLabel, index) in columnDetails" :key="detailLabel.key" :label="detailLabel.name"
                class="form-item">
                <template v-if="!isEditStatus">
                    <span v-if="detailLabel.key === 'companyId'">
                        {{ companyData[currentDetail.companyId] }}
                    </span>
                    <span v-else-if="detailLabel.key === 'fundId'">
                        {{ fundData[currentDetail.fundId] }}
                    </span>
                    <span v-else>{{ detailLabel.render ? detailLabel.render(currentDetail[detailLabel.key]) :
                        currentDetail[detailLabel.key] }}</span>
                </template>

                <template v-else>
                    <el-input v-if="!detailLabel.type" v-model="currentDetail[detailLabel.key]"></el-input>
                    <el-date-picker v-if="detailLabel.type === 'date'" v-model="currentDetail[detailLabel.key]" type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                    <el-select v-if="detailLabel.type === 'select' && detailLabel.key === 'companyId'"
                        v-model="currentDetail[detailLabel.key]" placeholder="请选择" :disabled="!isEditStatus">
                        <el-option v-for="item in companyList" :key="item.companyId" :label="item.companyName"
                            :value="item.companyId">
                        </el-option>
                    </el-select>
                    <el-select v-if="detailLabel.type === 'select' && detailLabel.key === 'fundId'"
                        v-model="currentDetail[detailLabel.key]" placeholder="请选择" :disabled="!isEditStatus">
                        <el-option v-for="item in fundList" :key="item.fundId" :label="item.fundName" :value="item.fundId">
                        </el-option>
                    </el-select>
                </template>

            </el-form-item>
        </el-form>
        <div class="operation-container">
            <el-button style="margin-right: 15px" v-if="isEdit" @click="toEdit()" size="small" type="primary">
                {{ isEditStatus ? '取消编辑' : '编辑' }}
            </el-button>
            <el-button @click="submit()" v-if="isEditStatus" size="small" type="primary">
                确定
            </el-button>
        </div>

    </div>
</template>
<script>
import { saveOrUpdatePerformance, getPerformanceDetail } from '@/api/performance.js';
import { fetchList, saveOrUpdateCompany, delCompany } from '@/api/companies'
import { fetchFundList } from '@/api/fund.js'

import { mapGetters } from 'vuex'

const columnDetails = [
    // {
    //     name: '绩效ID',
    //     align: 'center',
    //     with: '120',
    //     key: 'performanceId',
    // }, 
    {
        name: '指标名称',
        align: 'center',
        with: '120',
        key: 'metricName',
    }, {
        name: '指标值',
        align: 'center',
        with: '120',
        key: 'metricValue',
    }, 
    {
        name: '基金',
        align: 'center',
        with: '120',
        key: 'fundId',
        type: 'select'
    },
    // {
    //     name: '日期',
    //     align: 'center',
    //     with: '120',
    //     key: 'date',
    //     type: 'date'
    // },
]
export default {
    name: '',
    data() {
        return {
            currentDetail: {},
            columnDetails,
            isEditStatus: false,
            isEdit: false,
            companyList: [],
            fundList: [],
            companyData: {},
            fundData: {}
        }
    },
    computed: {
        ...mapGetters([
            'userId',
        ])
    },
    mounted() {
        const id = this.$route.query.id;
        this.fetchCompanyList();
        this.fetchFundList()
        if (id) {
            this.isEdit = true
            getPerformanceDetail({ id }).then(res => {
                this.currentDetail = res.data;
            })
        } else {
            this.isEdit = false;
            this.isEditStatus = true;
        }
    },
    methods: {
        toEdit() {
            this.isEditStatus = !this.isEditStatus;
        },
        fetchCompanyList() {
            fetchList({
                pageNum: 1,
                pageSize: 99999,
            }).then(res => {
                this.companyList = res.data.list;
                this.companyData = this.companyList.reduce((res, company) => {
                    res[company.companyId] = company.companyName
                    return res
                }, {});
            })
        },
        fetchFundList() {
            fetchFundList({
                pageNum: 1,
                pageSize: 99999,
            }).then(res => {
                this.fundList = res.data.list
                this.fundData = res.data.list.reduce((res, fund) => {
                    res[fund.fundId] = fund.fundName;
                    return res
                }, {});
            })
        },
        submit() {
            const companyAndFundAndDate = {
                fundId: this.currentDetail.fundId,
                fundName: this.fundData[this.currentDetail.fundId],
                ...this.findFundCompany(this.currentDetail.fundId)
            }

            saveOrUpdatePerformance(this.isEdit ? { ...this.currentDetail, ...companyAndFundAndDate  } : {
                ...this.currentDetail,
                ...companyAndFundAndDate,
                performanceId: null
            }).then(res => {
                this.$message.success('操作成功');
                this.$router.push({ path: '/company/performance' })
            })
        },
        findFundCompany(fundId){
           const fund = this.fundList.find(fund => fund.fundId === fundId)
           return {
            companyId: fund.companyId,
            companyName: fund.companyName
           }
        }
    }
};
</script>
<style lang='scss' scoped>
.detail-container {
    padding: 20px;
}

.form-item {
    margin: 10px 0;
}

.operation-container {
    margin-top: 10px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>